<template>
	<div class="select">
		<div v-if="initloading" class="select-loading">
			<el-icon class="is-loading"><el-icon-loading /></el-icon>
		</div>
		<el-tree-select
			ref="tree-select"
			v-bind="$attrs"
			v-model="value"
			:loading="loading"
			@visible-change="visibleChange"
			:data="options"
			:placeholder="placeholder"
			:highlight-current="true"
			:default-expand-all="expandAll"
			:show-checkbox="multiple"
			:check-strictly="multiple"
			:check-on-click-node="multiple"
			:multiple="multiple"
			:accordion="accordion"
			clearable 
			filterable 
			style="width: 100%;"
		/>
  </div>
</template>

<script>
	import config from "@/config/select";

	export default {
		props: {
			placeholder: { type: String, default: "请选择" },
			multiple: { type: Boolean, default: () => {return false;}},
			expandAll: { type: Boolean, default: true },
			accordion: { type: Boolean, default: true },
			apiObj: { type: Object, default: () => {} },
			dict: { type: String, default: "" },
			params: { type: Object, default: () => ({}) },
			apiProps: { type: Object, default: () => ({}) },
			defaultFirst: { type: Boolean, default: false },
			dataType: { type: String, default: "Number" },
		},
		data() {
			return {
				dicParams: this.params,
				loading: false,
				options: [],
				props: config.props,
				initloading: false,
				value: undefined,
				styles: {
					width: '300px'
				},
				test: '',
				values: ['11111'],
				treeParams: {
					clickParent: false,
					filterable: true,
					'check-strictly': true,
					'default-expand-all': true,
					'expand-on-click-node': false,
					data: [],
					props: {
						children: 'child',
						label: 'name',
						disabled: 'disabled',
						value: 'testId'
					}
				},
				normalizer(node){       
					if (node.children && !node.children.length) {   //去掉childList=[]的情况
						delete node.children;
					}
					return {
						id: node.id,    //字段名的替换
						label: node.label,
						children: node.children
					}
				},
			}
		},
		created() {
			//如果有默认值就去请求接口获取options
			//if(this.$attrs.modelValue && this.$attrs.modelValue.length > 0){
				this.initloading = true
				this.getRemoteData();
			//}
		},
		mounted() {
			// let data = [ 
			// 	{id: '1',label: 'a',
			// 		children: [ 
			// 			{id: '11',label: 'aa'},
			// 			{id: '12',label: 'ab'}
			// 		],
			// 	}, 
			// 	{id: '2',label: 'b',
			// 		children: [ 
			// 			{id: '21',label: 'bb'},
			// 			{id: '22',label: 'bc'}
			// 		],
			// 	}, 
			// 	{id: '3',label: 'c'} 
			// ];
			// this.options = data;
			//this.$refs.treeSelect.treeDataUpdateFun(data);
		},
		computed:{
			value: function(){
				return this.$attrs.modelValue;
			}
		},
		watch:{
			// dict: function(val){
			// 	this.getRemoteData();
			// }
		},
		methods: {
			// 下拉框修改
			_selectChange(val) {
				console.log(val, '<-select change');
			},
			// 树点击
			_nodeClickFun(data, node, vm) {
				console.log('this _nodeClickFun', this.values, data, node);
			},
			// 树过滤
			_searchFun(value) {
				console.log(value, '<--_searchFun');
				// 自行判断 是走后台查询，还是前端过滤
				// this.$refs.treeSelect.$refs.tree.filter(value);
				this.$refs.treeSelect.filterFun(value);
				// 后台查询
				// this.$refs.treeSelect.treeDataUpdateFun(treeData);
			},
			// 自定义render
			_renderFun(h, { node, data, store }) {
				return (
					<span class='custom-tree-node'>
						<span>{node.label}</span>
					</span>
				);
			},
			//选项显示隐藏事件
			visibleChange(ispoen){
				//if(ispoen && this.options.length==0 && (this.dict || this.apiObj)){
					this.getRemoteData()
				//}
			},
			//获取数据
			async getRemoteData(){
				this.loading = true
				this.dicParams[config.request.name] = this.dict
				var res = {}
				
				res = await this.$API.system.dept.tree.get();
				if (res.code == 200){
					this.options = res.data;
					console.log('res.data.data',res.data)
				}
				console.log('this.options', this.options);
				// if(this.apiObj){
				// 	res = await this.apiObj.get(this.params)
				// 	// 使用个性配置
				// 	if (this.apiProps!=null){
				// 		this.props = this.apiProps;
				// 	}
				// }else if(this.dict){
				// 	// 字典映射的值
				// 	this.props = { label: 'dictLabel', value: 'dictValue' }
				// 	res = await config.dicApiObj.get(this.dict)
				// }
				// var response = config.parseData(res)
				// this.options = response.data
				this.loading = false
				this.initloading = false

				// // 设置数据类型
				// if (this.$attrs.modelValue!=undefined && this.$attrs.modelValue!=null && this.$attrs.modelValue!=""){
				// 	if (this.dataType == "Number") {
				// 		this.value = parseInt(this.$attrs.modelValue);
				// 	} else {
				// 		this.value = this.$attrs.modelValue.toString();
				// 	}
				// } else {
				// 	if (this.defaultFirst){
				// 		this.value = this.options[0][this.props.value];
				// 		this.$emit('success', this.value);
				// 	}
				// }
			}
		}
	}
</script>

<style scoped>
	.select {display: inline-block;position: relative;}
	.select-loading {position: absolute;top:0;left:0;right:0;bottom:0;background: #fff;z-index: 100;border-radius: 5px;border: 1px solid #EBEEF5;display: flex;align-items: center;padding-left:10px;}
	.select-loading i {font-size: 14px;}

	.dark .select-loading {background: var(--el-bg-color-overlay);border-color: var(--el-border-color-light);}
</style>
